<template>
    <el-dialog title="申请开票" v-model="invDialog" width="800" :before-close="handleInvClose">
            <el-form :model="invForm" ref="invRef" :rules="invpRules" label-width="120px">                
                <el-form-item label="发票类型" prop="type">
                    <el-radio-group v-model="invForm.type">
                        <el-radio :value="1">电子普通</el-radio>
                        <el-radio :value="2">电子专票</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="抬头类型" prop="name_type">
                    <el-radio-group v-model="invForm.name_type">
                        <el-radio :value="1">个人发票</el-radio>
                        <el-radio :value="2">企业发票</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="发票金额" prop="invoice_money">
                    <el-input v-model="invForm.invoice_money" placeholder="请输入申请发票金额"></el-input>
                </el-form-item>
                <el-form-item label="发票抬头" prop="invoice_name">
                    <el-input v-model="invForm.invoice_name" placeholder="请输入发票抬头"></el-input>
                    <div class="fxn-text-light-gray">个人开票：请填写个人姓名；公司开票：请填写公司营业执造全称。</div>
                </el-form-item>
                <el-form-item v-if="invForm.name_type == 2" label="纳税人识别号" prop="id_number" :rules="[{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }]">
                    <el-input v-model="invForm.id_number" placeholder="请输入纳税人识别号"></el-input>
                </el-form-item>
                <el-row v-if="invForm.type == 2 && invForm.name_type == 2">
                    <el-col :span="12">
                        <el-form-item label="电话" prop="phone">
                            <el-input v-model="invForm.phone" maxlength="11" placeholder="请输入电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地址" prop="address">
                            <el-input v-model="invForm.address" placeholder="请输入地址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开户行" prop="bank_name">
                            <el-input v-model="invForm.bank_name" placeholder="请输入开户行"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账号" prop="bank_no">
                            <el-input v-model="invForm.bank_no" placeholder="请输入账号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleInvClose">取消</el-button>
                    <el-button :loading="btnLoading" type="primary" @click="handleInvSubmit">确认</el-button>
                </div>
            </template>
        </el-dialog>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        props: {
            invDialog: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            invData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
        },
        emits: ['update:invDialog', 'handleSubmit'],
        setup(props) {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                //申请开票
                btnLoading: false,
                invRef: '',
                invForm: {
                    type: 1,
                    name_type: 1,
                    invoice_money: '',
                    invoice_name: '',
                    id_number: '',
                    phone: '',
                    address: '',
                    bank_name: '',
                    bank_no: '',
                },
                invpRules: {
                    type: [
                        { required: true, message: '请选择发票类型', trigger: 'blur' }
                    ],
                    name_type: [
                        { required: true, message: '请选择抬头类型', trigger: 'blur' }
                    ],
                    invoice_money: [
                        { required: true, message: '请输入发票金额', trigger: 'blur' },
                        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' }
                    ],
                    invoice_name: [
                        { required: true, message: '请输入发票抬头', trigger: 'blur' }
                    ],
                },

                //窗口
                invDialog: computed({
                    get: ()=>{
                        return props.invDialog
                    },
                    set: ()=>{
                        return props.invDialog
                    }
                }), 
            })

            //提交申请开票
            const handleInvSubmit = (e) => {
                state.invRef.validate((valid) => {
                    if(valid){
                        state.btnLoading = true;
                        proxy.$http.post('/oa/Lawcase/financeInvoiceForm',{
                            lawcase_id: props.invData.lawcase_id,
                            finance_id: props.invData.finance_id,
                            type: state.invForm.type,
                            name_type: state.invForm.name_type,
                            invoice_money: state.invForm.invoice_money,
                            invoice_name: state.invForm.invoice_name,
                            id_number: state.invForm.id_number,
                            phone: state.invForm.phone,
                            address: state.invForm.address,
                            bank_name: state.invForm.bank_name,
                            bank_no: state.invForm.bank_no,
                        })
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                proxy.$msg.success('提交成功');
                                proxy.$emit('update:invDialog', false);
                                proxy.$emit('handleSubmit');
                            }
                        })
                    }
                })
            }

            //关闭申请开票
            const handleInvClose = () => {
                proxy.$emit('update:invDialog', false);
                proxy.$refs.invRef.resetFields();
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleInvSubmit,
                handleInvClose,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    
</style>